<template>
  <div class="header_box">
    <div class="sys_time">2022年04月24日</div>
    <div class="sys_title">可视化大屏</div>
<!--    <div class="sys_time"> {{ timer }} </div>-->
    <div class="sys_logo">
        <span class="sys_btn" @click="openAside">{{ isMenu ? "关闭" : "打开" }}菜单</span>
    </div>
  </div>
</template>

<script>
export default {
  name: "headMenu",
  data () {
    return {
      timer: '',
      isMenu: this.$route.path === '/screenGroup/index' ? false : true,
    }
  },
  mounted() {
    this.getTime()
  },
  methods: {
    getTime() {
      let t = null;
      t = setTimeout(time, 1000); //开始运行
      function time() {
        clearTimeout(t); //清除定时器
        let dt = new Date();
        let y = dt.getFullYear();
        let mt = dt.getMonth() + 1;
        let day = dt.getDate();
        let h = dt.getHours(); //获取时
        let m = dt.getMinutes(); //获取分
        let s = dt.getSeconds(); //获取秒
        this.timer = "当前时间：" + y + "年" + mt + "月" + day + "日" + h + ":" + m + ":" + s;
        t = setTimeout(time, 1000); //设定定时器，循环运行
      }
    },
    openAside() {
      this.isMenu = !this.isMenu;
      this.$emit("listenToHead", this.isMenu);
    },
  },
  watch: {
    timer(newV) {
      this.timer = newV
    }
  }
};
</script>

<style scoped>
  .header_box{
    background: url("../../assets/image/header.png") no-repeat;
    background-size: 100% 100%;
    height: 0.875rem;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 8fr 1fr;
    justify-items:center;
    align-items: center;
    /*display: flex;*/
    /*justify-content: space-between;*/
    color: #fff;
  }
  .sys_title{
    /*line-height: 1.1rem;*/
    padding-top: 0.3rem;
    font-size: 0.35rem;
    /*text-align: center;*/
  }
  .sys_time{
    font-size: 0.25rem;
  }
  .sys_logo{
    /*line-height: 0.75rem;*/
    font-size: 0.22rem;
  }
  .sys_btn{
    display: inline-block;
    width: 1.2rem;
    height: .5rem;
    text-align: center;
    line-height: .5rem;
    border-radius: 0.15rem;
    background-color: #265abf;
  }
  .sys_btn:hover{
    cursor: pointer;
    background-color: #1acacc;
  }

</style>
